.container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    padding: 12px;

    .item {
        width: 100%;
        height: 120px;
        border-radius: 8px;
        background-color: #fff;
        transition: all 0.2s;
        color: #1dac57;
        cursor: pointer;
        margin-bottom: 12px;
        overflow: hidden;
        position: relative;

        div:first-child {
            flex: 1;
        }

        div:last-child {
            position: absolute;
            top: 0;
            z-index: 999;
            background-color: #FFFFFF;
        }

        &:hover {
            >div:last-child {
                width: 100% !important;
                box-shadow: 0px 0px 6px #1dac57 inset;
            }

            * {
                opacity: 1;
            }
        }
    }


}

.row {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
        white-space: nowrap;
        text-align: center;
        position: relative;
        color: #000;

        &::after {
            content: "";
            width: 1px;
            height: 16px;
            right: -6px;
            top: 4px;
            background-color: #000;
            position: absolute;
            animation: identifier 1s ease-in-out 0s infinite reverse forwards;
        }
    }
}

.column {
    display: flex;
    justify-content: center;
    align-items: center;

    span {
        white-space: nowrap;
        text-align: center;
        position: relative;
        writing-mode: vertical-lr;
        color: #000;

        &::after {
            content: "";
            width: 16px;
            height: 1px;
            left: 2px;
            bottom: -4px;
            background-color: #000;
            position: absolute;
            animation: identifier 1s ease-in-out 0s infinite reverse forwards;
        }
    }
}

@keyframes identifier {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}